<template>
	<w-container id="page-bg">
		<w-navbar leftIcon="back-btn-white" :titleStyle="{color:'white'}" title="充值" :placeholder="true"></w-navbar>
		<view class="pa-16">
			<view class="font-color-white font-size-12">禁止未成年人充值、消费等。虚拟货币，，一经充值，概不退换，理性消费。</view>
			<view class="font-color-white mt-12">我的余额：<text class="font-color-theme">{{ userInfo.money }}</text></view>
			<view class="flex flex-ai-center flex-wrap mt-12" style="gap:12rpx">
				<view @tap="money = item.money,current = index" v-for="(item,index) in list" :key="index" class="item-box flex-dir-col flex-js-center flex-ai-center" :class="money == item.money?'active':'default'">
					<view>￥{{ item.money }}</view>
					<view>金额</view>
				</view>
			</view>
			<u-gap height="50"></u-gap>
			<w-button @tap="submit">确定充值</w-button>
		</view>
	</w-container>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	import {
		add_money
	} from '@/api/wallet/index.js'
	import { getUserInfo } from '@/api/user'
	export default {
		data() {
			return {
				money:'',
				current:0,
				list:[
					{
						id:'yiyuanchongzhi1',
						money:'1.00',
					},
					{
						id:'liuyuanchongzhi6',
						money:'6.00',
					},
					{
						id:'shibayuan18',
						money:'18.00',
					}
				]
			} 
		},
		computed:{
			...mapState('user',['userInfo'])
		},
		methods: {
			...mapActions('applePay',['getChannels']),
			...mapActions('user',['getUserInfo']),
			submit(){
				if(!this.money) {
					return uni.showToast({   
						title:'请选择充值金额',
						icon:'none'
					})
				}
				// this.addMoney()
				this.getChannels(this.list[this.current].id).then( response => {
					console.log('苹果支付回来');
					this.addMoney()
				})
			},
			addMoney(){
				add_money({money:this.money}).then( res => {
					uni.showToast({
						title:'充值成功',
						icon:'none'
					})
					this.getUserInfo({refresh:true})
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {
		padding:36rpx;
		text-align:center;
	}
	.active {
		border:1rpx solid $theme-color;
		border-radius:12rpx;
		color:$theme-color;
	}
	.default {
		border:1rpx solid #bbbbbbbb;
		border-radius:12rpx;
		color:#bbbbbb;
	}
</style>
